<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" :align-center="true" width="40%" title="我要举报">
    <el-form
      ref="wsFormRef"
      :disabled="dialogData.isView"
      :model="dialogData.itemInfo"
      label-width="120px"
      label-suffix=" :"
      :hide-required-asterisk="dialogData.isView"
    >
      <el-form-item label="举报类型">
        <el-select v-model="dialogData.itemInfo.reportType" class="m-2" placeholder="请选择" size="large" style="width: 100%">
          <el-option v-for="item in workerReportEnum" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          style="width: 100%"
          v-model="dialogData.itemInfo.content"
          :autosize="{ minRows: 5 }"
          type="textarea"
          placeholder="请填写举报信息"
          maxlength="100"
          show-word-limit
        />
      </el-form-item>
      <el-form-item>
        <el-alert title="消息提示: 结果反馈" type="success" show-icon :closable="false" />
        <div class="info-wrapper">
          <div>
            <span class="info-item">
              千万职联为您提供简历补偿服务: 如您下载到无效简历，可在简历详情页举报，一经核实我们会立即为您补偿；
            </span>
          </div>
          <div>
            <span class="info-item">我们将在 “我的投诉”公布投诉结果</span>
          </div>
          <div><span class="info-item">我们会通过站内信的方式通知您</span></div>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" v-show="!dialogData.isView" :icon="Check" @click="handleSubmit" :loading="btnLoading">
        保存
      </el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { getOptTitle, OptEnum } from "@/biz/eenum/appEnum";
import { DialogParam } from "@/biz/interface/DialogType";
import { WorkerReportEntity } from "@/biz/interface/WorkerType";
import { workerReportEnum } from "@/biz/datas/workerData";
import { Check } from "@element-plus/icons-vue";

import { saveWorkerReportApi } from "@/api/modules/cpyswk/wk";

//页面的数据
interface OptionDialogOption extends DialogParam {
  //弹出表单的标题
  title: string;
  //是否是查看状态，查看状态是不可以提交数据
  isView: boolean;
  // 工友
  workerId: string;
  //当前的数据对象
  itemInfo: WorkerReportEntity;
}

//提交按钮，避免多次提交
const btnLoading = ref(false);
//弹出框的参数
const dialogVisible = ref(false);
//当前表单数据在这里初始化
const dialogData = reactive<OptionDialogOption>({
  optType: OptEnum.UNKNOW,
  title: "",
  isView: false,
  workerId: "",
  itemInfo: {}
});

// 接收父组件传过来的参数
const acceptParams = (params: OptionDialogOption): void => {
  dialogData.optType = params.optType;
  dialogData.rowData = params.rowData;
  dialogData.isView = dialogData.optType === OptEnum.VIEW;
  dialogData.title = getOptTitle(dialogData.optType);

  // console.log("接收到的参数:", dialogData.rowData);

  // if (dialogData.rowData) {
  //   if (dialogData.rowData.id) {
  //     getItemInfo(dialogData.rowData.id);
  //   } else {
  //     initItemInfo();
  //     dialogData.itemInfo.workerId = params.workerId;
  //   }
  // }
  initItemInfo();
  dialogData.itemInfo.workerId = params.workerId;

  dialogVisible.value = true;
};

//初始化页面的数据
const initItemInfo = (): void => {
  dialogData.itemInfo = {};
};
// //获取当前数据的详情，直接调用接口获取数据
// const getItemInfo = async (id: string) => {
//   if (id) {
//     let { data } = await infoCompanyWorkerStatusApi({ id });
//     dialogData.itemInfo = data as unknown as WorkerReportEntity;
//   }
// };

const wsFormRef = ref<FormInstance>();
const handleSubmit = () => {
  btnLoading.value = true;
  wsFormRef.value!.validate(async valid => {
    if (!valid) {
      btnLoading.value = false;
      return;
    }
    try {
      let { data } = await saveWorkerReportApi(dialogData.itemInfo);
      if (data) {
        ElMessage.success({ message: `举报成功！` });
        //刷新列表数据
        emits("refresh-list");
        dialogVisible.value = false;
      }
    } catch (error) {
      // console.log(error);
    } finally {
      btnLoading.value = false;
    }
  });
};

//页面事件
const emits = defineEmits(["refresh-list"]);

//页面参数
defineExpose({
  acceptParams
});
</script>
<style scoped lang="scss">
.info-wrapper {
  width: 100%;
  background: var(--el-color-info-light-7);

  .info-item {
    color: var(--el-color-info);
    font-size: 0.8rem;
    font-weight: 600;
  }
}
</style>
